<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="问题描述" name="des">
                <div class="detail">
                    <img class="image" src="../../../../../assets/插值查找/插值查找.jpeg">
                    <div class="detail-text">
                        <div class="text">
                            插值查找是根据查找关键字与查找表中最大最小关键字比较后的查找方法。插值查找基于二分查找，
                            将查找点的选择改进为自适应选择，提高查找效率。
                        </div>
                        <el-table :data="tableData" border style="width: 99%;">
                            <el-table-column prop="name" label="名称" />
                            <el-table-column prop="time" label="时间复杂度(分布均匀)" />
                            <el-table-column prop="timeBest" label="时间复杂度(分布不均匀)" />
                        </el-table>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="相关研究" name="3">
                <ul>
                    <li v-for="item in thesisData" :key="item.title">
                        <a :href="item.link" target="_blank">
                            <div class="thesis">
                                <img class="thesis-cover" src="../../../../../icons//thesis.svg" alt="">
                                <div class="thesis-title">
                                    {{ item.title }}
                                </div>
                                <div class="thesis-author">
                                    <span>作者：</span>{{ item.author }}
                                </div>
                                <div class="thesis-time">
                                    <span>时间：</span>{{ item.time }}
                                </div>
                                <div class="thesis-source">
                                    <span>来源：</span>{{ item.source }}
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="应用场景" name="4">
                <div class="detail">
                    <img class="use" src="../../../../../assets/插值查找/插值查找2.jpg" alt="">
                    <div class="text">
                        插值查找适用于数据集较大且分布相对均匀的情况，例如在数字、日期等有序数据的查找中表现较好。
                        在这些场景下，插值查找能够更准确地估计目标值的位置，从而提高查找效率。
                        数模比赛中，常常需要根据已知的样本点进行数据的处理和分析，而有时候现有数据较少或数据不全，
                        不足以支撑分析的进行，这时就需要使用插值法“模拟产生”一些新的但又比较靠谱的值来满足需求，这就是插值的作用。
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

// 相关研究部分
const thesisData = [
    {
        title: "基于插值预测的快速查找算法",
        author: "叶三星,高伟,古富强,李维良",
        time: "2011年",
        source: "百度学术",
        link: "https://xueshu.baidu.com/usercenter/paper/show?paperid=a6141a78497a85c78168e235b912eab1&site=xueshu_se",
    },
    {
        title: "Java 与查找算法（4）：插值查找",
        author: "暗星涌动",
        time: "2023年",
        source: "CSDN",
        link: "https://blog.csdn.net/qq_42449106/article/details/130916272?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170822214316800197031200%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170822214316800197031200&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-130916272-null-null.142^v99^control&utm_term=%E6%8F%92%E5%80%BC%E6%9F%A5%E6%89%BE%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6&spm=1018.2226.3001.4187",
    },
    {
        title: "插值查找算法",
        author: "睿科知识云",
        time: "2022年",
        source: "CSDN",
        link: "https://blog.csdn.net/ccc369639963/article/details/122621169?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170822052216800226538277%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170822052216800226538277&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-4-122621169-null-null.142^v99^control&utm_term=%E6%8F%92%E5%80%BC%E6%9F%A5%E6%89%BE&spm=1018.2226.3001.4187",
    },

]

// 复杂度表格描述
const tableData = [
    {
        name: '插值查找',
        time: 'O(log2(log2n))',
        timeBest:'O(n)',
    },
]
</script>

<style scoped lang="scss">
* {
    list-style: none;
}

.image {
    width: 290px;
    border-radius: 10px;
    margin-right: 10px;
}

a {
    text-decoration: none;
    /* 去除默认的下划线 */
    outline: none;
    /* 去除旧版浏览器的点击后的外虚线框 */
    color: #000;
    /* 去除默认的颜色和点击后变化的颜色 */
}

.detail {
    display: flex;
    justify-content: center;
    align-items: end;

    .detail-box {
        display: flex;
        flex-direction: column;
    }

    .text {
        margin-left: 10px;
        margin-bottom: 10px;
        cursor: default;
    }

    .use {
        width: 240px;
        height: 150px;
        border-radius: 10px;
    }
}

// 相关研究部分
.thesis {
    width: 98%;
    position: relative;
    left: 20px;
    margin-bottom: 10px;
    font-weight: normal;
    background: #F5F5F5;
    border-radius: 10px;
    transition: all 0.2s linear;

    .thesis-title {
        position: absolute;
        top: 0;
        left: 5px;
    }

    .thesis-author {
        position: absolute;
        top: 25px;
        left: 120px;
    }

    .thesis-time {
        position: absolute;
        top: 45px;
        left: 120px;
    }

    .thesis-source {
        position: absolute;
        top: 65px;
        left: 120px;
    }

    &:hover {
        cursor: pointer;
        transform: translateX(-15px);
    }
}
</style>